<template>
  <div id="app">
    <el-container class="app-container">
      <!-- 左侧开始 -->
      <el-aside class="app-container-aside">
        <!-- 菜单导航开始 -->
        <el-row style="scroll:no">
          <el-col :span="24">
            <el-menu
              v-bind:router = true
              default-active="1"
              background-color="#324057"
              text-color="#bfcbd9"
              active-text-color="#20a0ff"
            >
              <!-- 首页开始 -->
              <el-menu-item index="home">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
              </el-menu-item>
              <!-- 首页结束 -->
              <!-- 数据管理开始 -->
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-folder"></i>
                  <span>数据管理</span>
                </template>
                <el-menu-item-group>
                  <div class="el-menu-item-box">
                    <el-menu-item index="userList">用户列表</el-menu-item>
                    <el-menu-item index="shopList">商家列表</el-menu-item>
                    <el-menu-item index="foodList">食品列表</el-menu-item>
                    <el-menu-item index="orderList">订单列表</el-menu-item>
                    <el-menu-item index="adminList">管理员列表</el-menu-item>
                  </div>
                </el-menu-item-group>
              </el-submenu>
              <!-- 数据管理结束 -->
              <!-- 添加数据开始 -->
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-folder-add"></i>
                  <span>添加数据</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="addShop">添加商铺</el-menu-item>
                  <el-menu-item index="addGood">添加商品</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 添加数据结束 -->
              <!-- 图表开始 -->
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-s-data"></i>
                  <span>图表</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="User">用户分布</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 图表结束 -->
              <!-- 编辑开始 -->
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-edit-outline"></i>
                  <span>编辑</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="textEdit">文本编辑</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 编辑结束 -->
              <!-- 设置开始 -->
              <el-submenu index="6">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span>设置</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="adminSetting">管理员设置</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 设置结束 -->
              <!-- 说明开始 -->
              <el-submenu index="7">
                <template slot="title">
                  <i class="el-icon-document"></i>
                  <span>说明</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="explain">说明</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 说明结束 -->
            </el-menu>
          </el-col>
        </el-row>
        <!-- 菜单导航结束 -->
      </el-aside>
      <!-- 左侧结束 -->
      <!-- 右侧开始 -->
      <router-view></router-view>
      <!-- 右侧结束 -->
    </el-container>
  </div>
</template>
<style>
/* 初始化样式 */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
html {
  height: 100vh;
}
body {
  height: 100vh;
}
#app {
  height: 100vh;
}
.app-container {
  height: 100vh;
}
.app-container-aside {
  width: 200px;
  height: 100%;
  background-color: #324157;
}

.top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      font-size: 14px;
}
</style>
